Chrome Developer Tools

昔のインターン先の凄腕エンジニアが鮮やかに使いこなしてたので、憧れて勉強していました

Chrome Developer Toolsの使い方【サイボウズ開運研修2021】

https://www.youtube.com/watch?v=aL9OarYImm0

「特に使えるdeveloperツールの機能」

虫眼鏡：webページ上の要素をマウスを使って選択できる

スマホ：スマホなどの表示を確認するためのエミュレーションウィンドウの表示

その右：各タブはパネルと呼ばれており、このパネルで機能を切り替えられる

=：デベロッパーツールの下部へのドロワーの表示

歯車：デベロッパーツールの詳細な設定をする設定ダイアログの表示

ドラッグ：デベロッパーツールを別ウィンドウにするか、下辺右辺どちらにするか切り替える

・パネルについて

-elements

-network

-sources

-timeline

-profiles

-resources

-audits

-console

-deviceMode

——elements

タグの要素とスタイルを検証するための機能で、Web開発者が最も多く使う機能である

1.虫眼鏡アイコン

2.DOMエレメントツリー

3.サイドバー(CSS)

4.パンクズりすと（今の階層表示）

style:要素に設定されたCSSを確認できる

computed：最終的に要素に適用されたスタイルを確認できる

event listeners：要素に関連づけられたイベントを確認できる

DOM breakpoints：要素に関連づけられたブレークポイントを確認できる

properties：JavaScriptからアクセスできる要素やオブジェクトなどのプロパティを確認できる

——Network

Web開発をしていく中で最も使用するタブの１つ

通信内容を一覧で表示できるのでページ表示が遅くなっている原因を特定するのに非常に有益である

1.Status：HTTPステータス

2.Initiator：ファイルを呼び出す起点

3.Time：ダウンロードにかかった時間

4.Preserve log：ログの保持

5.フィルター

タイムラインの各項目上にマウスカーソルを当てるとさらに詳細な時間が表示される

1.Blocking：サーバーへの接続の再利用やプロキシへの接続などリクエスト送信までの待ち時間

2.Sending：リクエストの送信時間

3.Waiting：サーバーがレスポンスを返すまでの時間

4.Receiving：受信開始から完了までの時間

一番左のname列のファイルをクリックするとさらに詳細を確認できる

・Headers：HTTPリクエストとレスポンスのヘッダーを確認

・Preview：テキストデータならレスポンステキスト画像ファイルなら画像の情報

・Response：レスポンス本文

・Cookies：リクエスト、レスポンスで使用されたクッキー

・Timing：ファイルの取得にかかった時間の詳細

1.Blocking

2.DNS Lookup

3.Connection

4.SSL

5.Sending

6.Waiting

7.Receiving

DNSlookupに時間がかかっている場合、DNSプリフェッチ

SendingやReceivingで時間がかかっている場合、サーバーの物理配置の変更、CDNの検討、GZip圧縮の検討

Waitingで時間がかかっている場合Webサーバー側の処理をチューニング

——-Sources

CSSやJavaScriptのコードをデバッグできる機能

最近のJavaScripライブラリは通信速度を高速化するためミニファイされたコードが返されることが多い

左下のコードの整形ボタンを押すと見やすくなる

デバッグ機能

Watch Expressions：+をクリックして追跡したい変数を追加できる

Call Stack：ブレーク時の処理の呼び出し階層を確認できる

Scope Variables：ブレーク時に実行中のスコープにある変数とその値を確認できる

BreakPoints：JavaScriptコードのブレークポイント

DOM breakpoints：DOMイベントのブレークポイントを確認できる

XHR breakpoints：ajaxなどJavascriptコードからのXMLHttpRequest呼び出しをドメイン単位でブレークできる

Event Listener Breakpoints：ページ内で発生したイベント単位でブレークを指定できる

Workers：Web Workerの開始時にデバッグを開始するかどうかを指定できる

コールスタックを遡って実行済みの呼び出し元をデバッグすることができる

LiveEditという機能があるが、ミニファイされたコードを整形しているときは使用できない

——Timeline

UIのパフォーマンスを計測してチューニングポイントを探し出すための機能

Recordボタンを押してからstopまでの情報が記録される

・Eventモード

デフォルトではページの表示で発生したイベントを記録したenventsモードで表示される

1.Loading：読み込み、ネットワークの送受信

2.Scripting：スクリプトの実行、イベント処理

3.Renderingg：DOMの変更、ページのレイアウト

4.Painting：画像の処理

・Framesモード

描画パフォーマンスを調べる

・JavaScriptコールスタックの表示

Stacksをチェックすると、タイムラインを記録する時にJavaScriptのコールスタックを記録する

処理に時間がかかっているJavaScriptのコードを見つけられる

・Memory使用料の表示

タイムラインのメモリ使用量を確認できる

さらに詳細を確認したい場合はProfileパネルで確認する

——Profiles

CPUやメモリの情報を収集して詳細を確認できる

1.Collect JavaScript CPU profiles

2.Take Heap Snapshot：JavaScriptコードとDOMノードが使用しているヒープメモリのスナップショットを採取する

3.Record Heap Allocations：確保したヒープを時間軸で記録する

——Audits

監査パネルはWebを最適化するための推奨事項を提示してくれるユニークな機能である

——Console

非常に強力な機能であり、コマンドライン入力により様々な操作ができるようになっている

大きく分けると、ログの閲覧とインタラクティブな操作ができるようになる

表示しているページの状態確認やデバッグ、DOMを操作してページ内のエレメントを変更など様々なことができる

documentオブジェクトなど基本的なJavascriptの機能を操作するだけでなく、jQuery構文も利用できるようになっている。

JavaScriptで作成されたオブジェクトの中身は直接変数名を入力することで確認できる

「Chrome DevToolsを使いこなす」

command + option + i

DevToolsの主な役割はWeb開発におけるデバッグ

WebページやWebアプリは多岐にわたる技術の集合なので、単独のデバッグツールだけでは役に立たない。

言語：HTML, CSS, JavaScript

データ管理：Cookie, LocalStorage, SessionStorage, WebSQL, IndexedDB

プロトコル：HTTP(S)

データ通信：XHR(ajax)

DevToolsの使用例

・表示崩れの原因を特定

・JavaScriptをデバッグ

・表示速度のチューニング

９つのパネルを使いこなす

・Elements

・Console

・Sources

・Network

・Performance

・Memory

・Application

・Security

・Audits

・Elements

DOMツリー、CSSのスタイル、DOMノード、親子に割り当てられたJavaScriptのイベントリスナなどの調査変更が可能

HTMLはただのテキスト情報だが、DOMノードはJavaScriptから見てオブジェクトとして扱うことができる

ElementsパネルではDOMの状態をリアルタイムで確認できるのでJavaScriptによるDOM操作やCSSによるスタイル変更などのデバッグで重要である

・Console

対話型のJavaScript実行環境である。

JavaScriptの実行で発生したエラーやconsole関数によって出力されるログ、ページの読み込みで発生したネットワークエラーなどが表示される

右側に表示されるファイル名と行番号をクリックするとsourcesパネルに移動して該当するコードを確認できる

console.log(),console.error(),console.table()

・Sources

表示しているWebページが読み込んでいるファイルを確認できる

ソースコードの行番号をクリックするとブレークポイントを設定でき、JavaScriptのコードと変数の値を確認しながらステップ実行できる

・Network

表示しているWebページから発行されるHTTPリクエストの種類やレスポンスの確認に用いられる

例えばjsonApiとSPAの通信内容はnetworkパネルから確認できる

ページの読み込みが遅い時もこのパネルを確認するべし

・Performance

レンダリングのパフォーマンス測定に利用される。

ページを表示する際、ブラウザエンジンがどのような処理を行なっていて、どれくらいの時間がかかっているかを詳しく調査できる

表示にかかる時間をスクリーンショットと合わせて記録してくれるため、表示をブロックしている処理を調査したい場合などにも有効

・Memory

表示しているwebページで使用されているメモリの量を調べられる

クラッシュしたらメモリリークの可能性を疑う

・Application

ページが提供しているService Workerやデータストレージを管理できる

CookieやSessionStorageなどのデータストレージ値はここから削除や書き換えができる

・Security

ページから発行される接続リクエストが安全であるかどうかを判断して診断結果を表示してくれる

HTTPSを利用しているサイトでは一部でもHTTPリクエストがあると安全ではないと出てしまう

・Audits

ブラウザから見たNetworkUtilizationとWebPagePerformanceという２つの項目を検査してくれる

ただし、PageSpeedToolsの方が良い回答をしてくれる

・+α

Chromeのウェブストアから拡張機能を追加することでパネルを追加できる

「ChromeデベロッパーツールのConsoleを使いこなす」

Web画面からの情報抽出やChromeExtension開発が捗るようになる

・コマンドラインAPI

$$(selector)

$(selector)

$_

copy(object)

clear()

inspect(object/function)

dir(object)